@charset "utf-8";
@import url(common_review.css);
.cont{
    padding: 30px;
}
.prlogo img{
    height: 40px;
}
.cont .atit{
    margin-top: 0;
    font-size: 30px;
    letter-spacing: -1;
    /* word-spacing: 0px; */
}

.afig{
    margin: 15px 0;
    text-align: center;
}

.afig img{
    width: 100%;
}

.afig small{
    font-family: 'Nanum Myeongjo', serif;
    font-size: 12px;
    color: #838383;
}

.arti p{
    font-size: 16px;
    line-height: 1.7;
    /* letter-spacing: 0px; */
    padding: 0 10px;
    text-align: justify;
}

.cont article{
    border-top: 2px dashed #c4d7ff;
    margin-top: 40px;
    padding: 15px;
}

.cont .desc h5{
    display: inline-block;
    border-radius: 20px;
    padding: 10px 20px;
    margin: 0;
    background-color: #bb6083;
    box-shadow: inset 0 0 5px #e7e7e7;
    font-family: 'Do Hyeon', sans-serif;
    font-weight: normal;
    font-size: 22px;
    color: #f1f1f1;
}

.desc div{
    padding-top: 20px;
}

.cont h5{
    text-align: right;
}
.cont h5 a{
    display: inline-block;
    border: 2px dashed #8898dd;
    background-color: lightsalmon;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    line-height: 65px;
    text-align: center;
    color: #4e4e4e;
    text-decoration: none;
}
.cont h5 a:hover{
    box-shadow: inset 0 0 5px 5px rgba(136, 109, 185, 0.582);
}

.work{
    text-align: center;
    /* background-color: aquamarine; */
    background-image: linear-gradient(to bottom, rgb(8, 85, 15), rgb(127, 73, 189));
    background-clip: content-box;
    color: #dddddd;
}

.work h3{
    font-family: 'Do Hyeon', sans-serif;
    font-size: 35px;
    font-weight: normal;
}

.work figure img{
    border: 20px ridge darkgoldenrod;
}

.work figcaption{
    font-family: 'Nanum Myeongjo', serif;
    margin: 10px 0 50px;
}

.work figcaption cite{
    font-style: normal;
}

/* 분야별 뉴스 제목 공통 글씨체 적용하기 */
article h3{
    font-family: 'Do Hyeon', sans-serif;
    font-size: 23px;
    font-weight: normal;
    margin-bottom: 0;
}
article a{
    text-decoration: none;;
    color: rgb(31, 31, 31);
}

.cnews ul{
    list-style-type: "👍";
}

.cnews ul li:first-child a{
    color: #046404;
}

.cnews ul li:nth-child(2) a{
    color: #b04fb9;
}

.cnews ul li:last-child a{
    color: #491386;
}

/* 
((궁금)) ul이든 ol이든간에 마우스오버하면 lightblue가 나왔으면 하는데...
아무리 부모요소를 더 줘도 ul의 a요소들은 색상 변화가 없네... 뭘 잘못한거지...?
이제보니까 선생님이랑 한것도 전체 a에 색상 줬는데...!
나 잠깐 자리비웠을 때 설명해주셨나? ㅠ-ㅜ 궁금궁금...
*/
html body article li a:hover{
    color: lightblue;
    text-shadow: 0 0 1px rgba(29, 29, 29, 0.863);
}

article a:hover{
    color: rgb(207, 118, 66);
    text-shadow: 0 0 1px rgba(204, 204, 204, 0.863);
}

.rank ol{
    list-style: upper-roman;
}

.rank ol li:first-child a{
    color: red;
}
.rank ol li:nth-child(2) a{
    color: green;
}
.rank ol li:last-child a{
    color: brown;
}

.secnews dt{
    border: 2px dashed darkred;
    display: inline-block;
    background-color: plum;
    border-radius: 10px;
    box-shadow:  2px 2px 3px darkgreen;
    padding: 10px;
    margin-left: 18px;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    font-size: 15px;
}

.secnews dt:first-of-type{
    color: red;
}
.secnews dt:nth-of-type(2){
    color: green;
}
.secnews dt:last-of-type{
    color: blue;
}


/* 
((궁금)) 박스들이 서로 너무 가까울 때... 마진으로 밀어내는 게 좋은지, 패딩으로 밀어내는 게 좋은지?
마진은 위아래라면 서로 겹칠 수도 있고(아래), 박스가 커질 수도 있으니까 패딩으로 여백을 주는 게 좋은 것 같은데 이 생각이 맞는지..?
그리고 어떤 박스에 여백을 주는 게 좋은지...? 따로 권고되는 부분이 있나..?(추천되는 부분...??)
*/

.secnews dd{
    font-family: 'Nanum Myeongjo', serif;
    margin: 20px 50px;
}

/* 사진뉴스 */
.pnews h3{
    text-align: center;
    margin-bottom: 25px;
}
.pnews h3::before{
    content: "🌈";
}

.pnews table{
    margin: 0 auto;
    /* text-align: center; */
    border-collapse: collapse;
    border: 2px solid #1d0db1;
}

.pnews table td:first-child{
    width: 70px;
    height: 70px;
    background-color: #1d0db1;
    text-align: center;
    color: #dddddd;
    font-weight: bold;
}

.pnews td:nth-child(2){
    background-color: #dddddd;
    padding: 0 20px;
    font-family: 'Nanum Myeongjo', serif;
    color: hotpink;
}

.pnews td:last-child{
    background-color: #dddddd;
}

.pnews tr+tr td{
    border-top: 2px solid #1d0db1;
}

.pnews img{
    width: 120px;
    vertical-align: middle;
    padding: 10px;
}

/* 말줄임표 자동 표시기능 */
dl a, table td:nth-child(2) a{
    display: block;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}